<template>
	<view>
		<view class="topupHead">
			<view class="topupNum">
				充值金额
			</view>
			<view class="topupSelect">
				<view @click="selectNum(index)" v-for="(item,index) in topupList" :key="index" :class="[{item},{itemStyle:showItem == index}]">
					<image v-if="showItem == index" src="/static/images/pitch-on-img.png"></image>
					<text>{{ item.text }}元</text>
				</view>
			</view>
			<view class="otherNum">
				其他充值金额
			</view>
			<view class="inputNum">
				<input type="text" v-model.trim="topupNum" />
			</view>
		</view>
		
		<view class="topupWay">
			<view class="itemWay" style="border-bottom: 1rpx solid #E5E5E5;">
				<view>支付方式</view>
				<view></view>
			</view>
			<view class="itemWay">
				<view class="itemRight">
					<image src="/static/images/weixin.png"></image>
					<text>微信支付</text>
				</view>
				<view @click="selectWay(0)" class="itemLeft">
					<image v-if="!showImg" src="/static/images/pitchOn.png"></image>
					<view v-else></view>
				</view>
			</view>
			<!-- <view class="itemWay">
				<view class="itemRight">
					<image src="/static/images/zhifubao.png"></image>
					<text>支付宝支付</text>
				</view>
				<view @click="selectWay(1)" class="itemLeft">
					<image v-if="showImg" src="/static/images/pitchOn.png"></image>
					<view v-else></view>
				</view>
			</view> -->
		</view>
		
		<view class="topupBtn">
			<view class="btnLeft">
				<text>充值金额</text>
				<text style="color: #FE3F3B;margin-left: 20rpx;">￥{{ topupPrice }}</text>
			</view>
			<view @click="topUpMoney" class="btnRight">
				充值
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				topupList:[
					{
						text:'298'
					},
					{
						text:'598'
					}
				],
				showItem:0.1,
				topupNum:0, // 其它金额
				showImg:0,
				topupPrice:0 // 充值金额
			};
		},
		watch:{
			topupNum(newValue) {
				if(!newValue) {
					this.topupPrice = 0
					this.showItem = 0.1
				}else {
					this.topupPrice = newValue
				}
			}
		},
		methods:{
			selectNum(index) {
				this.showItem = index
				this.topupNum = this.topupList[index].text
			},
			selectWay(index) {
				if(this.showImg == index) {
					return
				}
				this.showImg = index
			},
			topUpMoney() {
				// #ifdef H5
				this.$common.errorToShow('请联系客服');
				uni.navigateTo({
					url: '/pages/service/service'
				});
				// #endif 
				
				// #ifdef APP-PLUS-NVUE || APP-PLUS
				let that = this
				if(!this.topupPrice) {
					this.$common.errorToShow('请输入金额');
					return
				}  
				if (!that.showImg) {
					that.$common.loadToShow('正在支付');
					if (that.payStatus) {
						that.$common.errorToShow('请不要重复点击')
						return;
					} 
					that.payStatus = true;
					that.$api.recharge({ price: that.topupPrice, type: 'app' }, res => {
						if (res.status == 200) {
							uni.requestPayment({ 
								provider: 'wxpay',
								orderInfo: {
									appid: res.data.data.appid,
									noncestr: res.data.data.noncestr,
									package: res.data.data.package,
									partnerid: res.data.data.partnerid,
									prepayid: res.data.data.prepayid,
									timestamp: res.data.data.timestamp,
									sign: res.data.data.sign
								},
								success: function(data) {
									that.$common.successToShow('充值成功');
									uni.switchTab({
										url: '/pages/user/index'
									});
								},
								fail: function(err) {}
							});
						} else {
							that.$common.errorToShow(res.message);
						}
						that.$common.loadToHide();
						that.payStatus = false;
					});
				}else {
					that.$common.errorToShow('暂未开通,请先使用微信支付');
				}
				// #endif
			}
		}
	}
</script>

<style lang="less">
.topupHead {
	height: 530rpx;
	background: #FFFFFF;
	padding:20rpx 30rpx 0;
	margin: 20rpx 0;
	.topupNum,.otherNum {
		margin-bottom: 50rpx;
	}
	.topupSelect {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-bottom: 60rpx;
		.item {
			position: relative;
			width: 200rpx;
			height: 120rpx;
			background: #FFFFFF;
			border: 2rpx solid #E7E7E7;
			border-radius: 8rpx;
			text-align: center;
			line-height: 120rpx;
			font-size: 30rpx;
			font-weight: bold;
			color: #333333;
			margin-right: 100rpx;
				image {
					position: absolute;
					bottom: 0;
					right: 0;
					width: 40rpx;
					height: 37rpx;
				}
		}
		.itemStyle {
			border: 2rpx solid #FF9143;
			color: #FF9143;
		}
	}
	.inputNum {
		position: relative;
		width: 257rpx;
		height: 100rpx;
		line-height: 100rpx;
		border-bottom: 4rpx solid #E7E7E7;
		input {
			position: absolute;
			top: 50%;
			left: 20rpx;
			transform: translateY(-50%);
			font-size: 51rpx;
		}
	}
}

.topupWay {
	background: #FFFFFF;
	.itemWay:last-child {
		border-bottom: none;
	}
	.itemWay {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 35rpx;
		.itemRight {
			image {
				width: 40rpx;
				height: 35rpx;
				vertical-align: middle;
				margin-right: 10rpx;
			}
			text {
				vertical-align: middle;
			}
		}
		
		.itemLeft {
			view {
				width: 35rpx;
				height: 35rpx;
				border-radius: 50%;
				border: 2rpx solid #999999;
			}
			image {
				width: 35rpx;
				height: 35rpx;
			}
		}
	}
}

.topupBtn {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 115rpx;
	background: #FFFFFF;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 20rpx;
	.btnLeft {
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
	}
	.btnRight {
		width: 160rpx;
		height: 68rpx;
		background: #FF9143;
		border-radius: 35rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 68rpx;
	}
}

</style>
